<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- key 是唯一标识 
     由于vue是虚拟dom操作 , 他需要进行diff算法的比较 比较需要标签tag , key名 来完成 相同节点的比较  ,有key后 不会发生错乱,增加diff算法的性能 -->

     <!-- vue的虚拟dom 的理解
      虚拟dom是用js对象来模拟的真实dom  
      模拟了真实dom的tag ,key,attr,on,children等属性
      操作虚拟dom 可以结合diff算法,相对真实dom的操作 性能更高
      -->
      <!-- let Vdiv={
        tag: 'div',
        key:"777",
        attr:{
          id:"app"
        },
        styke:{},
        on:{},
        children:[
          {tag: 'h1',key:"111",children:"111"},
          {tag: 'h1',key:"222",children:"222"},
          {tag: 'h1',key:"333",children:"333"},
        ]
      } -->
    <h1 v-for="(val,key,index) in car" :key="key">
       {{val}}
    </h1>
    <h1 v-for="(item,index) in list" :key="item.name"> {{item.name}}</h1>
    <button @click="change">改变</button>
  </div>
   <script src="./vue.js"></script>
   <script>
      // vue2的双向绑定原理 （响应式原理）  Object.defineProperty
      // 他的set负责拦截数据的变化，get负责赋值数据变化
      // 进入组件一次性的将所有数据 递归监听完毕
      // data 内部 对象和数组 新增的数据 无法监听到了
      // vue2 提供了 this.$set 来解决这个问题 
      // vue3 使用proxy代理来 实现双向绑定 解决了这个问题
      // Object.defineProperty('data',"car",{
      //   get(){
      //     // 触发视图更新  updataView()
      //     return car
      //   },
      //   set(val){
      //     val---拦截到数据变化
      //   }
      // })
    new Vue({
      el:"#app",
      data(){
        return {
          msg:"你好",
          list:[{name:1},{name:2},{name:3}],
          car:{
            name:"奔驰",
            room:{
              color:"red"
            }
          }
        }
      },
      methods:{
        change(){
          this.car.room.site=5; //无法及时响应式
          // 使用vue的this.$set 解决 对象新增数据 无法及时响应的问题
          // this.$set(this.car,'room',{...this.car.room,site:5})

          // 删除数据中的属性  及时响应式
          // this.$delete(this.obj,'属性')
          
          // 由于vue2的响应式 对数组的7个方法的原型进行了重写
          // push pop unshift shift  sort  reverse splice
          // 7个方法 可以响应式
          // this.list.push("麻辣香锅") 

          // 解决vue2无法及时响应的问题 可以强制更新组件
           this.$forceUpdate();
           
        }
      }
    })
   </script>
</body>
</html>